<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="{{ url_for('static', path='css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', path='css/bootstrap.rtl.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', path='css/bootstrap-grid.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', path='css/bootstrap-grid.rtl.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', path='css/bootstrap-reboot.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', path='css/bootstrap-reboot.rtl.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', path='css/bootstrap-utilities.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', path='css/bootstrap-utilities.rtl.min.css') }}" rel="stylesheet">
    <script src="{{ url_for('static', path='js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ url_for('static', path='js/bootstrap.esm.min.js') }}"></script>
    <script src="{{ url_for('static', path='js/bootstrap.min.js') }}"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-6">
            <table class="table table-striped" id="main-table">
                <tbody>

                </tbody>
            </table>
            <div class="input-group mb-3">
                <input type="text" class="form-control"
                       placeholder="Recipient's username"
                       list="datalistOptions"
                       aria-label="Recipient's username"
                       aria-describedby="button-addon2"
                       oninput="suggest_stock(this)"
                       id="stock_code"
                >
                <button class="btn btn-outline-secondary" type="button" id="button-addon2" onclick="add_stock()">
                    add
                </button>
                <button class="btn btn-outline-secondary" type="button" onclick="remove_comment()">
                    remove
                </button>
                <button class="btn btn-outline-secondary" type="button" onclick="test()">
                    test
                </button>
                <datalist id="datalistOptions">

                </datalist>
            </div>
        </div>
        <div class="col-6" id="monitor"></div>
    </div>

</div>
<table>
    <tbody>

    </tbody>
</table>
</body>
<script>
    function test() {
        fetch(`/xueqiu/api/user_timeline`).then(resp => resp.json()).then(data => {
            let c = document.querySelector('#comment')
            c.innerHTML = ""
            let ul = document.createElement('ul')

            for (let i = 0; i < data.data.length; i++) {
                let li = document.createElement('li')
                let dt = new Date(data.data[i].created_at)
                li.innerHTML = `${dt.toLocaleDateString()} ${dt.toLocaleTimeString()}<br>${data.data[i].text}`
                ul.append(li)
            }
            c.append(ul)
        })
    }

    function add_stock() {
        let stock_code_ele = document.querySelector('#stock_code')
        fetch('/xueqiu/api/set_stocks', {
            method: 'POST',
            body: JSON.stringify({"stocks": [stock_code.value]}),
            headers: {"content-type": "application/json"}
        }).then(resp => {
            stock_code_ele.value = ""
        })
    }

    setInterval(() => {
        monitor()
        fetch("/xueqiu/api/get_data").then(resp => resp.json()).then(resp_data => {
            let tbody = document.querySelector('#main-table tbody')
            document.querySelectorAll('#main-table tbody tr').forEach((e) => {
                e.remove()
            })
            let data = resp_data.data
            for (let i = 0; i < data.length; i++) {
                let tr = document.createElement('tr')
                let td1 = document.createElement('td')
                let td2 = document.createElement('td')
                let td3 = document.createElement('td')
                let td4 = document.createElement('td')
                let td5 = document.createElement('td')
                let td6 = document.createElement('td')
                let td7 = document.createElement('td')
                tr.append(...[td1, td2, td3, td4, td5, td6, td7])
                td1.innerHTML = `<button class="btn btn-sm btn-primary" title="${data[i].stock_name}" onclick="get_comment('${data[i].symbol}')">${data[i].stock_name}</button>`
                td2.innerText = data[i].current.toFixed(2)
                td3.innerText = (data[i].percent || 0).toFixed(2)
                td4.innerText = `${(data[i].amplitude || 0).toFixed(2)}(${(data[i].low || data[i].current).toFixed(2)}-${(data[i].high || data[i].current).toFixed(2)})`
                td5.innerText = (data[i].amount / 100000000).toFixed(2)
                td6.innerHTML = data[i].turnover_rate.toFixed(2)
                td7.innerHTML = `<button class="btn btn-sm btn-danger" onclick="remove_stock('${data[i].symbol}')">del</button>`
                tbody.append(tr)
            }
        })
    }, 1000)

    function remove_stock(stock_code) {
        fetch(`/xueqiu/api/remove_stock?stock_code=${stock_code}`, {method: "DELETE"})
    }


    function suggest_stock(e) {
        let q = e.value;
        fetch(`/xueqiu/api/suggest?q=${q}`).then(resp => resp.json()).then(data => {
            let datalist = document.querySelector('#datalistOptions')
            datalist.innerHTML = ""
            for (let i = 0; i < data.data.length; i++) {
                let opt = document.createElement('option')
                opt.value = data.data[i].code
                opt.innerText = `${data.data[i].query}(${data.data[i].code})`
                datalist.append(opt)
            }
        })
    }

    function monitor() {
        const div = document.querySelector('#monitor')

        fetch(`/xueqiu/api/monitor`).then(resp => resp.json()).then(data => {
            div.innerHTML = ""
            let html = ""
            data.data.list.forEach((e) => {
                if (!/ST/.test(e["stock_name"]))
                    html += `${e["stock_name"]}(${e["status"]}) ${e['content']}</br>`
            })
            div.innerHTML = html;
        })

    }

</script>
</html>